<!-- 监控图表 -->
<template>
  <section>
    <!-- 更新时间，需引入formaTime -->
    <div class="container">
      <span class="update-time">(更新时间：{{ formatTime(monitorData.currentData.cysj) }})</span>
      <!-- 表格一 -->
      <table>
        <tr>
          <th class="col" colspan="3">监控参数</th>
        </tr>
        <tr>
          <td>精炼A相一次侧电流{{ monitorData.currentData.yccdlA }}</td>
          <td>精炼A相一次侧电压{{ monitorData.voltageData.yccdlA }}</td>
          <td>精炼变压器二次设定电压{{ monitorData.setCurrentData.jlbyqecsddy }}</td>
        </tr>
        <tr>
          <td>精炼B相一次侧电流{{ monitorData.currentData.yccdlB }}</td>
          <td>精炼B相一次侧电压{{ monitorData.voltageData.yccdlB }}</td>
          <td>精炼变压器二次电流{{ monitorData.setCurrentData.jlbyqecdl }}</td>
        </tr>
        <tr>
          <td>精炼C相一次侧电流{{ monitorData.currentData.yccdlC }}</td>
          <td>精炼C相一次侧电压{{ monitorData.voltageData.yccdlC }}</td>
          <td>精炼电耗{{ monitorData.setCurrentData.jldh }}</td>
        </tr>
        <tr>
          <td>精炼A相二次侧电流{{ monitorData.currentData.eccdlA }}</td>
          <td>精炼A相二次侧电压{{ monitorData.voltageData.eccdlA }}</td>
          <td>精炼炉A相设定电流{{ monitorData.setCurrentData.jllAxsddl }}</td>
        </tr>
        <tr>
          <td>精炼B相二次侧电流{{ monitorData.currentData.eccdlB }}</td>
          <td>精炼B相二次侧电压{{ monitorData.voltageData.eccdlB }}</td>
          <td>精炼炉B相设定电流{{ monitorData.setCurrentData.jllBxsddl }}</td>
        </tr>
        <tr>
          <td>精炼C相二次侧电流{{ monitorData.currentData.eccdlC }}</td>
          <td>精炼C相二次侧电压{{ monitorData.voltageData.eccdlC }}</td>
          <td>精炼炉C相设定电流{{ monitorData.setCurrentData.jllCxsddl }}</td>
        </tr>
      </table>
    </div>
  </section>
  <section>
    <div class="container">
      <!-- 表格二 -->
      <table>
        <tr>
          <th>电弧炉1号除尘在线监控数据</th>
          <th>电弧炉2号除尘在线监控数据</th>
          <th>电弧炉3号除尘在线监控数据</th>
        </tr>
        <tr>
          <td class="dm">一号烟尘含量{{ Number(monitorData.dustMonitor1.hychl) }}mg/m³</td>
          <td class="dm">二号烟尘含量{{ Number(monitorData.dustMonitor2.hychl) }}mg/m³</td>
          <td class="dm">三号烟尘含量{{ Number(monitorData.dustMonitor3.hychl) }}mg/m³</td>
        </tr>
        <tr>
          <td class="dm">一号氧气含量{{ Number(monitorData.dustMonitor1.hyqhl) }}%</td>
          <td class="dm">二号氧气含量{{ Number(monitorData.dustMonitor2.hyqhl) }}%</td>
          <td class="dm">三号氧气含量{{ Number(monitorData.dustMonitor3.hyqhl) }}%</td>
        </tr>
        <tr>
          <td class="dm">一号流速{{ Number(monitorData.dustMonitor1.hls) }}m/s</td>
          <td class="dm">二号流速{{ Number(monitorData.dustMonitor2.hls) }}m/s</td>
          <td class="dm">三号流速{{ Number(monitorData.dustMonitor3.hls) }}m/s</td>
        </tr>
        <tr>
          <td class="dm">一号压力{{ Number(monitorData.dustMonitor1.hyl) }}Pa</td>
          <td class="dm">二号压力{{ Number(monitorData.dustMonitor2.hyl) }}Pa</td>
          <td class="dm">三号压力{{ Number(monitorData.dustMonitor3.hyl) }}Pa</td>
        </tr>
        <tr>
          <td class="dm">一号温度{{ Number(monitorData.dustMonitor1.hwd) }}℃</td>
          <td class="dm">二号温度{{ Number(monitorData.dustMonitor2.hwd) }}℃</td>
          <td class="dm">三号温度{{ Number(monitorData.dustMonitor3.hwd) }}℃</td>
        </tr>
        <tr>
          <td class="dm">一号工况流量{{ Number(monitorData.dustMonitor1.hgkll) }}m³/H</td>
          <td class="dm">二号工况流量{{ Number(monitorData.dustMonitor2.hgkll) }}m³/H</td>
          <td class="dm">三号工况流量{{ Number(monitorData.dustMonitor3.hgkll) }}m³/H</td>
        </tr>
      </table>
    </div>
  </section>
</template>

<script setup>
import { defineProps } from 'vue'
import { formatTime } from '../utils/format.js'
defineProps({
  monitorData: {
    type: Object,
    required: true,
  },
})
</script>

<style scoped>
.container {
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

td {
  padding: 1rem;
  color: #0e0e0e;
  border-bottom: 1px solid #f1f3f5;
  transition: background-color 0.2s ease;
}

th {
  text-align: center;
  padding: 1rem;
  font-weight: 600;
  color: #0f0f0f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.5rem;
}

.dm {
  text-align: center;
}
.update-time {
  background: rgba(102, 126, 234, 0.1);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.9rem;
}
</style>
